

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>

    <script src="js/logout.js"></script>

</head>
<body>
    <div class="nav">
        <div class="flag">
            <img src="image/face2.png" alt="logo">
            <div class="title">我的博客系统</div>
        </div>

        <div class="page">
            <a href="blog_list.html">主页</a>
			<a href="myblog_list.html">内容管理</a>
            <a href="blog_add.html">写博客</a>
            <a href="javascript:logout()">注销</a>
        </div>
    </div>
    
    <div class="blog_edit_container">
		<div class="title">
			<input type="text" id="title_input" placeholder="在这里写下文章标题">
			<input type="submit" id="submit" onclick="mysub()" value="发布文章">
		</div>
		<div id="editorDiv">
			<textarea id="editor-markdown" style="display: none;"></textarea>
		</div>
    </div>
        <script>
            var editor;
            function initEdit(md){
                // 编辑器设置
                editor = editormd("editorDiv", {
                    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                    width: "100%",
                    // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                    height: "calc(100% - 50px)",
                    // 编辑器中的初始内容
                    markdown: md,
                    // 指定 editor.md 依赖的插件路径
                    path: "editor.md/lib/",
                    saveHTMLToTextarea: true // 
                });
            }
            initEdit("# 在这里写下一篇博客"); // 初始化编译器的值
            
            // 提交
            function mysub(){
                // alert(editor.getValue()); // 获取值
                // editor.setValue("#123") // 设置值
                // 1.校验参数
                title = jQuery("#title_input").val();
                content = editor.getValue();
                if (title.trim() == "") {
                    alert("请输入文章标题!");
                    return false;
                }
                if (content.trim() == "") {
                    alert("请输入文章内容!");
                    return false;
                }
    
                // 2.将用户提交的数据传递给后端
                jQuery.ajax({
                    url:"/art/add",
                    type:"POST",
                    data:{
                        "title":title.trim(),
                        "content":content.trim()
                    },
                    // 3.将结果返回给用户
                    success:function(res) {
                        if (res.code == 200 && res.data == 1) {
                            if (confirm("添加成功,是否继续添加?")) {
                                // 刷新当前页面
                                location.href = location.href;
                            } else {
                                // 跳转到我的文章管理页
                                location.href = "myblog_list.html";
                            }
    
                        } else {
                            alert("添加失败:"+res.meg);
                       }
                    }
    
                }); 
            }
        </script>
</body>
</html>